<template>
  <el-dialog
    width="400px"
    center
    :close-on-click-modal="false"
    :visible.sync="visible"
    :title="`${userForm.account}的基本信息`"
  >
    <el-form
      :model="userForm"
      :rules="userFormRules"
      ref="userForm"
      label-width="80px"
    >
      <el-form-item label="昵称" prop="name">
        <el-input v-model="userForm.name" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="userForm.sex">
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
          <el-radio label="0">保密</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input-number
          v-model="userForm.age"
          :min="0"
          :max="150"
          label="年龄"
        ></el-input-number>
        0代表保密哦~
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="userForm.phone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userForm.email" placeholder="邮箱"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    // 年龄的校验方法
    let validateAge = (rule, value, callback) => {
      if (value < 0 || value > 150) {
        return callback(new Error('允许0~150之间'))
      } else {
        this.$refs.userForm.validateField('checkPass')
        return callback()
      }
    }
    // 手机号的校验方法
    let validatePhone = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('手机号不能为空'))
      }
      // 手机号正则表达式
      const phoneRule = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
      if (phoneRule.test(value)) {
        this.$refs.userForm.validateField('checkPass')
        return callback()
      } else {
        return callback(new Error('手机号输入错误'))
      }
    }
    // 邮箱的校验方法
    let validateEmail = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('邮箱不能为空'))
      }
      // 邮箱正则表达式
      const emailRule = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+/
      if (emailRule.test(value)) {
        this.$refs.userForm.validateField('checkPass')
        return callback()
      } else {
        return callback(new Error('邮箱格式输入错误'))
      }
    }
    return {
      visible: false,
      userForm: {
        id: '',
        account: '',
        name: '',
        password: '',
        salt: '',
        email: '',
        phone: '',
        role: '',
        age: '',
        sex: '',
        is_deleted: '',
        created: '',
        updated: ''
      },
      userFormRules: {
        name: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
        email: [{ required: true, validator: validateEmail, trigger: 'blur' }],
        phone: [
          {
            validator: validatePhone,
            required: true,
            trigger: 'blur'
          }
        ],
        age: [{ validator: validateAge, type: 'number', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 初始化表单信息
    init(id) {
      this.userForm.id = id
      this.visible = true
      this.$nextTick(() => {
        this.$refs['userForm'].resetFields()
        if (this.userForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/member/user/info/${this.userForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              console.log(data)
              // 获取表单值
              this.userForm = data.user
              //this.userForm.id = data.user.id
              //this.userForm.account = data.user.account
              //this.userForm.name = data.user.name
              //this.userForm.password = data.user.password
              //this.userForm.salt = data.user.salt
              //this.userForm.email = data.user.email
              //this.userForm.phone = data.user.phone
              //this.userForm.role = data.user.role
              //this.userForm.age = data.user.age
              //this.userForm.sex = data.user.sex
              //this.userForm.is_deleted = data.user.is_deleted
              //this.userForm.created = data.user.created
              //this.userForm.updated = data.user.updated
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['userForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/member/user/update'),
            method: 'post',
            data: this.$http.adornData({
              id: this.userForm.id,
              account: this.userForm.account,
              name: this.userForm.name,
              password: this.userForm.password,
              salt: this.userForm.salt,
              email: this.userForm.email,
              phone: this.userForm.phone,
              role: this.userForm.role,
              age: this.userForm.age,
              sex: this.userForm.sex,
              is_deleted: this.userForm.is_deleted,
              created: this.userForm.created,
              updated: this.userForm.updated
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '保存成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshUserInfo')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
